<template>
  <div class="total-info-box flex-col-center">
    <slot name="title">
      <div class="total-info-box-title">已完成/总计</div>
    </slot>

    <div class="flex-row-center">
      <div class="curr-num">{{curr}}</div>
      <div class="gap-line">/</div>
      <div class="total-num">{{total}}</div>
    </div>
    <div>

    </div>
  </div>
</template>

<script lang="ts" setup>
  import {defineProps} from "vue"
  let props = defineProps<{
    total:number,
    curr:number
  }>();
</script>

<style scoped lang="less">
  .total-info-box{
    position: fixed;
    right: 10px;
    bottom: 20px;
    padding: 5px;
    border-radius: 5px;
    border: 2px solid var(--theme-color);

    .total-info-box-title{
      font-size: 12px;
    }
    .curr-num{
      color: var(--theme-color);
      font-size: 18px;
    }
    .total-num{
      font-size: 25px;

    }
    .gap-line{
      margin: 0 5px;
      color: var(--theme-color);
    }
  }
</style>